<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3滤镜</title>
	<style>
	  /* 默认是0~1, 即0~100% */
	  .gray {
	    filter: grayscale(1);	
		} 
		.sepia {
		  /* 看起来像老照片 old time */
		  filter: sepia();
		}
		.saturate {
		  /*0~100 */
		  filter: saturate(10);
		}
		.hue-rotate {
		  /* 0~360deg, 超出后重新计算 */
		  filter: hue-rotate(70deg);
		}
		.invert {
		  /* 看起来像相片底片, 50% 是分界线 */
		  filter: invert();
		}
		.opacity {
		  /* 和直接使用opacity是同样的效果, 因而没必要使用这个特效  */
		  filter: opacity(.1)
		}
		.brightness {
		  /* 0~1000, 大概到10差不多了*/
		  filter: brightness(5)
		}
		.contrast {
		  /* 大于1才有意思 */
		  filter: contrast(5);
		}
		.blur {
		  /* 0~100px, 注意好伤眼 */
		  filter: blur(5px)
		}
		.drop-shadow {
		  /* 增加立体感, 用法同box-shadow, 但效果有区别, box-shadow的阴影比较深/多 */
		  filter: drop-shadow(5px 5px 5px #ccc)
		}

	</style>
</head>
<body>
  <img class="nomral" src="img.jpg" height="100px">
	<img class="gray" src="img.jpg" height="100px">
	<img class="sepia" src="img.jpg" height="100px">
	<img class="saturate" src="img.jpg" height="100px">
	<img class="hue-rotate" src="img.jpg" height="100px">
	<img class="invert" src="img.jpg" height="100px">
	<img class="opacity" src="img.jpg" height="100px">
	<img class="brightness" src="img.jpg" height="100px">
	<img class="contrast" src="img.jpg" height="100px">
	<img class="blur" src="img.jpg" height="100px">
	<img class="drop-shadow" src="img.jpg" height="100px">
</body>
</html>
